Landing Page Builder Manual

You answer a set of questions about your offer and your audience, choose which sections the page should have, and the tool writes the copy and assembles a complete, working landing page around it. What comes out is a single index.html file you can host anywhere: your own server, Netlify, GitHub Pages, wherever your site already lives.

It runs entirely in your browser. There's no account to create with the tool itself and nothing gets uploaded to a server you don't control. The only outside call it makes is to Anthropic's API, using your own key, to write the copy.

A browser

Any current version of Chrome, Safari, Firefox, or Edge. No install, no extension.

An Anthropic API key

Free to create; usage is billed by the page. See the next section.

A place to host the result

Optional until you're ready to publish. The tool works fine if you just want to preview and download.

The tool needs an Anthropic API key to write copy on your behalf. It's separate from any account you have with Don, and separate from Claude.ai. It's tied directly to your own Anthropic billing.

1. Get a key

   Go to console.anthropic.com, sign in or create an account, open API Keys in the settings menu, and click Create Key. Copy the string that starts with sk-ant-.

2. Paste it in

   Drop it into the Anthropic API key field at the top of the page.

3. Decide whether to remember it

   Check Remember on this computer and the key is saved in your browser's local storage, so it's already there next time you open the tool. Leave it unchecked and it clears the moment you close the tab. Clear key wipes it immediately, either way.

Generating a page costs a small amount of API usage, charged to your Anthropic account. Rates differ by model, which is the next thing to decide.

Under the key field is a dropdown for which Claude model writes your copy, plus an Update models button next to it. The dropdown ships with three defaults, one from each family:

Anthropic's model lineup changes over time; new versions ship and older ones get retired. Rather than lock this tool to whatever was current the day it was built, Update models asks Anthropic directly which models your key can actually use right now and refreshes the dropdown with that list. It needs your API key entered first, since the list is specific to your account. Once you've run it, your choice of model and the list itself are both remembered in your browser, the same way the key is.

If you never touch this button, the tool keeps working off its built-in defaults. Click it whenever you want to check what's current, or if a model you'd normally pick has disappeared from the list.

Four groups of questions. Only two fields are required to generate a page: what you're selling and who it's for. Everything else sharpens the result; skip what you don't have and the model fills reasonable gaps, but specific answers beat generic ones every time.

The Basics

Brand name

Used in the headline, footer, and copyright line.

Contact email

Powers the mailto button if you include a Contact section.

What you're selling

Plain words. One of the two required fields.

Primary goal

Purchase, book a call, subscribe, download, join a waitlist, or send an inquiry. Steers the tone of the copy toward that specific action; it doesn't change the layout.

The Audience

Ideal customer

Who they are, what stage they're at. The other required field.

Biggest frustrations

One per line reads best and gets parsed more cleanly than a wall of text.

Desired outcome

What things look like once the problem is solved.

The Details

Features

What's actually included, item by item.

Benefits

What each feature does for the buyer. Features and benefits are different fields on purpose; keep them separate and the copy reads sharper.

Pricing & bonuses

The price, any bonuses, any deadline.

Guarantee

Leave it blank if there isn't one. The tool won't invent one for you.

The Voice

Social proof

Real quotes, names, and numbers outperform vague claims by a wide margin. If you leave this blank, the testimonials section writes believable samples and marks each one "(sample)" so you know to swap them out.

Brand voice

A short description is enough: direct, warm, formal, playful.

CTA wording

Optional. Leave it blank and the model writes button copy for you.

Three sections are always on: Hero, Final CTA, and Footer. Everything between them is a checkbox.

Problem, Solution, Benefits, Testimonials, Offer, and FAQ are checked by default; Features, Gallery, and Contact start unchecked. Turn any of them on or off before you generate. Two sections pull in extra images beyond the standard hero and footer shots: Solution uses one (solution.jpg), and Gallery uses eight (gal1.jpg through gal8.jpg) laid out in a grid. The image manifest after generation lists exactly what your chosen sections need.

Optional. Leave it blank and you get a clean editorial default: a light page, Playfair Display headings, Inter body text. If you want the page to look a specific way, there are two ways to steer it, and the tool figures out which one you've given it.

Click Build My Landing Page. The view switches over and you'll watch the copy stream in as the model writes it, section by section. Once it's finished, the tool assembles everything into a full page and drops a live preview into the frame below, styled and working, not just a wall of text.

How long it takes depends on the model and how many sections you turned on: usually somewhere between twenty seconds and a couple of minutes.

Four buttons sit below the preview:

Download index.html

Saves the finished file to your computer.

Copy the code

Puts the raw HTML on your clipboard, for pasting straight into a host that doesn't take file uploads.

Back to the brief

Returns to your answers, still filled in, so you can adjust something.

Regenerate

Reruns the same brief for a fresh pass. Covered in section 10.

The generated page references images by filename but doesn't include any; you supply those separately. Under the preview, the tool lists exactly which files your chosen sections call for, always hero.jpg and footer.jpg, plus solution.jpg and the eight gal1.jpg through gal8.jpg files if you turned those sections on.

1. Create a folder named images

   It has to sit right next to index.html, not inside another folder.

2. Drop your photos in, using the exact filenames listed

   Filenames are case-sensitive. Hero.jpg and hero.jpg are not the same file as far as a browser is concerned.

3. Open the page and check it

   Any slot without a matching file shows a labeled placeholder instead of breaking, so you can always see what's missing at a glance.

Copy the file list puts just the filenames on your clipboard if you'd rather paste them into a note while you're out shooting or sourcing photos.

If the copy is close but not quite right, click Regenerate instead of going back and re-entering everything. It sends the same brief through the model again for a new pass, which is often faster than hand-editing your way to something better. If the issue is more fundamental, wrong tone, missing detail, the wrong sections entirely, use Back to the brief instead and fix the actual input; better inputs beat repeated rerolls.

Your brief, your design file, and the copy that comes back all stay in your browser. The only place any of it travels to is Anthropic's API, and only because that's what writes the copy. There's no database behind this tool, no analytics, and nothing gets logged anywhere Don can see it.

Refresh the page and your brief is gone unless you'd saved it somewhere yourself; the tool doesn't autosave your answers. Your API key survives a refresh only if you checked Remember on this computer; otherwise it clears with the tab.